<template>
  <div v-loading="loading" class="base-info-main">
    <div v-if="detail&&baseInfo">
      <!--基础信息-->
      <div class="sp-base-box">
        <div class="flex-x-start-center">
          <!--<el-image-->
          <!--  class="logo"-->
          <!--  :src="fileBaseUrl+form.logoUrl"-->
          <!--  fit="fill"-->
          <!--/>-->
          <div>
            <div class="name">{{ detail.name }}</div>
            <div class="full-name">{{ detail.fullName }}</div>
          </div>
        </div>
        <div class="tag-content">
          <template v-if="detail.tags&&detail.tags.length">
            <el-tag v-for="tag in detail.tags" :key="tag" effect="dark" size="small">{{ tag }}</el-tag>
          </template>
        </div>
      </div>

      <!--账户数据-->
      <div class="common-box account-data-box">
        <div class="box-title">账户数据</div>
        <el-row :gutter="16" type="flex">
          <el-col :md="12" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '20px'}">
              <div class="title app-ellipsis-l1">服务商数 / 个</div>
              <div class="info app-color-primary app-ellipsis-l1">{{ baseInfo.spNum }}</div>
            </el-card>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '20px'}">
              <div class="title app-ellipsis-l1">商户数 / 个</div>
              <div class="info app-color-primary app-ellipsis-l1">{{ baseInfo.businessNum }}</div>
            </el-card>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '20px'}">
              <div class="title app-ellipsis-l1">成员数 / 个</div>
              <div class="info app-color-primary app-ellipsis-l1">{{ baseInfo.staffNum }}</div>
            </el-card>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '20px'}">
              <div class="title app-ellipsis-l1">当前版本</div>
              <div class="info app-color-primary app-ellipsis-l1">{{ baseInfo.spPackage&&baseInfo.spPackage.name || '-' }}</div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!--账户信息-->
      <div class="common-box account-info-box">
        <div class="box-title">账户信息</div>
        <el-card :body-style="{ padding: '20px 15px'}">
          <el-row :gutter="16" type="flex">
            <el-col :lg="12" :xl="8">
              <div class="info app-ellipsis-l1">服务商编号：{{ detail.serial||'-' }}</div>
              <!--<div class="info app-ellipsis-l1">业务人员：-</div>-->
              <div class="info app-ellipsis-l1">所在地区：{{ detail.address||'-' }}</div>
            </el-col>
            <el-col :lg="12" :xl="8">
              <div class="info app-ellipsis-l1">负责人：{{ detail.principal||'-' }}</div>
              <div class="info app-ellipsis-l1">手机号码：{{ detail.mobilePhone||'-' }}</div>
              <div class="info app-ellipsis-l1">联系邮箱：{{ detail.email||'-' }}</div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { spDetail, spBaseInfo } from '@/api/sp'

export default {
  data() {
    return {
      // 配置
      // 状态
      loading: false,
      // 数据
      detail: null,
      baseInfo: null
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取数据
    fetchData() {
      this.loading = true
      Promise.all([this.fetchDetail(), this.fetchBaseInfo()]).then(() => {
        this.loading = false
      })
    },

    // 获取详情
    fetchDetail() {
      const params = {
        servicerId: this.$route.query.spId
      }
      return new Promise(resolve => {
        spDetail({ params }).then(res => {
          this.detail = res.data
        }).finally(() => {
          resolve()
        })
      })
    },

    // 获取基础信息
    fetchBaseInfo() {
      const params = {
        spId: this.$route.query.spId
      }
      return new Promise(resolve => {
        spBaseInfo({ params }).then(res => {
          this.baseInfo = res.data
        }).finally(() => {
          resolve()
        })
      })
    }
    /**
     * 按钮组
     */
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.base-info-main {
  min-height: 500px;
  /*reset*/
  .el-row {
    flex-wrap: wrap;

    .el-col {
      margin-bottom: 16px;
      height: 100%;
    }
  }

  /*通用盒子*/
  .common-box {
    margin: 30px 0;

    .box-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }

  /*基础信息*/
  .sp-base-box {
    padding: 30px 0;
    border-bottom: 1px solid #EBEEF5;

    .logo {
      margin-right: 20px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    .name {
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: bold;
    }

    .tag-content {
      //padding-left: 100px;

      .el-tag {
        margin:0 10px 10px 0;
      }
    }
  }

  /*账户数据*/
  .account-data-box {
    .el-card {
      border-radius: 20px;
    }

    .title {
      font-weight: bold;
    }

    .info {
      margin-top: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }

  /*账户信息*/
  .account-info-box {
    .el-card {
      border-radius: 20px;

      .info {
        margin-top: 10px;
        font-size: 14px;
        color: #909399;
      }
    }
  }
}

</style>
